<template>
	<uni-popup ref="popup" type="center" :safe-area="false">
		<view class="box">
			<view class="box_title">连接wifi</view>
			<view class="box_password">
				<input 
				v-model="password"
				auto-focus
				class="box_password_input" 
				:password="true" 
				type="text" 
				placeholder="请输入wifi密码"
				placeholder-style="font-size: 24rpx;color: rgba(136, 136, 136, 1);">
			</view>
			<view class="box_btn l-f l-row-ad">
				<view 
				@click="confirm"
				class="box_btn_item box_btn_confirm" 
				hover-class="hover-scale" 
				:hover-stay-time="100">确定</view>
				<view 
				@click="cancel"
				class="box_btn_item box_btn_cancel" 
				hover-class="hover-scale" 
				:hover-stay-time="100">取消</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		name:"wifi-connect",
		data() {
			return {
				password: ''
			};
		},
		methods: {
			open() {
				this.password = ''
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			confirm() {
				if(!this.password) {
					uni.showToast({
						title: '请输入wifi密码',
						icon: 'none',
						position: 'top'
					})
					return
				}
				this.$emit('submit',this.password)
			},
			cancel() {
				this.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
.box {
	width: 630rpx;
	height: 640rpx;
	background: linear-gradient(to bottom,rgba(11, 12, 13, 1),rgba(53, 54, 56, 1));
	border-radius: 62rpx;
	padding-top: 64rpx;
	padding-left: 34rpx;
	padding-right: 34rpx;
	box-sizing: border-box;
	&_title {
		font-size: 38rpx;
		color: #ffffff;
		text-align: center;
		font-weight: 700;
	}
	&_password {
		margin-top: 94rpx;
		background: linear-gradient(to bottom,rgba(11, 12, 13, 1),rgba(53, 54, 56, 1));
		height: 142rpx;
		border-radius: 48rpx;
		box-shadow: inset 0 2rpx 2rpx 0 rgba(255, 255, 255, 0.25);
		&_input {
			height: 142rpx;
			width: 100%;
			color: #ffffff;
			font-size: 28rpx;
			padding-left: 34rpx;
			box-sizing: border-box;
		}
	}
	&_btn {
		margin-top: 84rpx;
		&_item {
			width: 240rpx;
			height: 108rpx;
			border-radius: 54rpx;
			font-size: 30rpx;
			color: #ffffff;
			text-align: center;
			line-height: 108rpx;
		}
		&_confirm {
			background: linear-gradient(to right,rgba(72, 228, 239, 1),rgba(43, 206, 181, 1));
		}
		&_cancel {
			background: linear-gradient(to right,rgba(134, 134, 134, 1),rgba(131, 131, 131, 1));
		}
	}
}
</style>